
<template>
	<view >
		<text class="pf-28">请选择需要移至的分组，同一产品支持多个分支{{ids}}</text>
		<view >
			<view >
				<view v-for="(item,index) in categoryList" :key="item.id">
					<view class="big-group" v-if="item.child != undefined" >
						<view  class="big-group-culom" v-for="(childItem,index) in item.child" :key="childItem.id" @tap="ischeck(childItem)" >
							<radio class="radio-scalc" :value="childItem.name" :checked="childItem.checked" />
							<view class="showName" >{{item.name}}<span class="pf-28 "> > {{childItem.name}} </span> </view>
						</view>
					</view>
					<view v-if="item.child == undefined" @tap="ischeck(item)">
						<view class=" sm-group">
							<radio class="radio-scalc" :value="item.name" :checked="item.checked"  />
							<view class="showName" >{{item.name}}</view>
						</view>
					</view>
				</view>	
			</view>
			<view class="sub-btn" @tap="moveTo">
				<button  class=" sub-btn " :class="btn_sub ? 'bg-grey':'bg-blue'" :disabled="btn_sub">确定</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				categoryList : [
					{
						"id" : 1 ,
						'name':'电子产品',
						'child' :[
							{"id" : 12,'name': '手机'},
							{'id' : 13 ,'name': '电脑'},
							{'id': 14,'name':'耳机'},
							],
					},
					{
						'id' : 2 ,
						'name' : '蛋糕' ,
					},
					{
						"id" : 3 ,
						'name':'服饰',
						'child' :[
							{"id" : 15,'name': '衣服'},
							{'id' : 16 ,'name': '首饰'},
							{'id': 17,'name':'鞋靴'},
						],
					},
				],
				current: 0 ,
				ids : [] ,
				btn_sub : true
			}
		},
		watch : {   //生命周期函数 检测 ids 是否有值 没有则不能提交
			ids : function(val , oldVal){
				if(val.length > 0){
					this.btn_sub = false;
					
				}else{
					this.btn_sub = true;
				}
			}
		},
		onLoad:function(options){
		  console.log(options);
		},
		methods : {
			ischeck(item){
				this.$set(item,'checked',!item.checked);//设置单选框是否选中样式
				// console.log(item)
				if(item.checked){
					//console.log("push",item.id)
					this.ids.push(item.id);
				}else if(this.ids.length == 1){
					this.ids = [] ;
				}else{
					//console.log("del",item.id)
					for(let i=0 ; i < this.ids.length ; i++){
						if(item.id == this.ids[i]){
							this.ids.splice(i,1);
						}
					}
				}
				
			},
			moveTo(){  //提交按钮
				console.log(this.ids);
			}
		}
	}
</script>

<style>
	
.pf-28 {
  padding-left: 28upx;
  font-size : 28upx;
  font-weight:500;
  color:rgba(180,180,180,1);
  line-height:40upx;
}
	
.form-radio {
	transform: scale(0.7);
}

/*分组字体*/
.child {
	font-size:30upx;
	font-weight:500;
	color:rgba(60,60,60,1);
}
/* 分组 */
.big-group ,.sm-group {
	margin: auto;
	width: 95%;
	background-color: white;
	border-radius: 8upx;
}

/*大分组*/
.big-group-culom , .sm-group{
	display: flex;
	flex-direction: row;
	height: 88upx;
	line-height: 88upx;
	
}



.sm-group {
	margin: 28upx auto;
	
	
	
}	

.uni-list-cell {
    justify-content: flex-start
}

.radio-scalc {
	transform:scale(0.7)
}

.sub-btn {
	position:fixed;
	bottom:0upx;
	width: 100%;
	border-radius: 0upx !important;
}

.showName {
	line-height: 88upx;
}

</style>
